<template>
  <div class="com-container">
      <div class="com-chart" ref="rank_ref"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data () {
        return {
            chartInstance: null,
            allData: null,
            startValue: 0,
            endValue: 9,
            timerId: null  //定时器标识符
        }
    },
    created() {
        // 组件创建完成后，进行回调函数的注册
        this.$socket.registerCallBack("rankData", this.getData);
    },
    mounted () {
        this.initChart();
        // this.getData();
        this.$socket.send({
            action: 'getData',
            socketType: 'rankData',
            chartName: 'rank',
            value: ''
        })
        window.addEventListener('resize', this.screenAdapter);
        this.screenAdapter()
    },
    destroyed () {
        window.removeEventListener('resize', this.screenAdapter);
        clearInterval(this.timerId);
        this.$socket.unRegisterCallBack('rankData');
    },
    methods: {
        initChart () {
            this.chartInstance = this.$echarts.init(this.$refs.rank_ref, this.theme);
            const initOption = {
                title: {
                    text: '▎地区销量排行',
                    top: 20,
                    left: 20
                },
                grid: {
                    top: '40%',
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: true
                },
                tooltip: {
                    show: true
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        type: 'bar',
                    }
                ]
            };
            this.chartInstance.setOption(initOption);
            this.chartInstance.on('mouseover', () => {
                clearInterval(this.timerId)
            });
            this.chartInstance.on('mouseout', () => {
                this.startInterval()
            })
        },
        getData (ret) {
            // const {data: ret} = await this.$http.get('rank');
            this.allData = ret;
            this.allData.sort((a, b) => {
                return b.value - a.value
            });
            this.updateChart();
            this.startInterval()
        },
        updateChart () {
            const colorArr1 = [
                ['#0BA82C','#4FF778'],
                ['#2E72BF','#23E5E5'],
                ['#5052EE','#AB6EE5']
            ];
            const categoryArr = this.allData.map(item => {
                return item.name
            });
            const valueArr = this.allData.map(item => {
                return item.value
            });
            const dataOption = {
                xAxis: {
                    data: categoryArr
                },
                dataZoom: {
                    show: false,
                    startValue: this.startValue,
                    endValue: this.endValue
                },
                series: [
                    {
                        data: valueArr,
                        itemStyle: {
                            color: arg => {
                                let targetColorArr = null;
                                if (arg.data > 300) {
                                    targetColorArr = colorArr1[0]
                                } else if (arg.data > 200) {
                                    targetColorArr = colorArr1[1]
                                } else {
                                    targetColorArr = colorArr1[2]
                                }
                                return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: targetColorArr[0]
                                    },
                                    {
                                        offset: 1,
                                        color: targetColorArr[1]
                                    }
                                ])
                            }
                        }
                    }
                ]
            };
            this.chartInstance.setOption(dataOption)
        },
        screenAdapter () {
            const titleFontSize = this.$refs.rank_ref.offsetWidth / 100 * 3.6;
            const adapterOption = {
                title: {
                    textStyle: {
                        fontSize: titleFontSize
                    }
                },
                series: [
                    {
                        barWidth: titleFontSize,
                        itemStyle: {
                            barBorderRadius: [titleFontSize / 2, titleFontSize / 2, 0, 0]
                        }
                    }
                ]
            };
            this.chartInstance.setOption(adapterOption);
            this.chartInstance.resize();
        },
        startInterval () {
            if (this.timerId) {
                clearInterval(this.timerId)
            }
            this.timerId = setInterval(() => {
                this.startValue++;
                this.endValue++;
                if (this.endValue > this.allData.length - 1) {
                    this.startValue = 0;
                    this.endValue = 9
                }
                this.updateChart()
            }, 2000)
        }
    },
    computed: {
        ...mapState(['theme'])
    },
    watch: {
        theme () {
            this.chartInstance.dispose(); // 销毁当前图表
            this.initChart();
            this.screenAdapter();
            this.updateChart();
        }
    }
}
</script>

<style>

</style>